
const app = getApp() //app.globalData


//index.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        nowDate: null,
        option:null,
    },
    dateChange(e) {
        app.globalData.http.get('/ai-sensing-back-service/api/map/calendar',{
            lnglat: app.globalData.lnglat,
            type: 'day',
            time: e.detail.dateString
        }).then(res=>{
            this.setChart(res.data.items)
        })
    },

    setChart(msg) {
        let data = {
          xdata:[],
          ydata:[]
        }
        if(msg){
            msg.map(e=>{
                data.xdata.push(e.day.split(' ')[1].slice(0,5))
                data.ydata.push(e.aqi)
            })
        }else{
            for(let i = 0;i<20;i++){
                data.xdata.push(i<10?`0${i}:00`:`${i}:00`)
                data.ydata.push(0)
            }
        }
        this.setData({
          option:{
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            grid: {
              top:'7%',
              left: '5%',
              right: '2%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                data: data.xdata,
                // x轴文字倾斜
                axisLabel:{
                  rotate:45,//倾斜度 -90 至 90 默认为0
                },
                axisTick: {
                  alignWithLabel: true
                }
              }
            ],
            yAxis: [
              {
                type: 'value',
                axisLine: {
                  show: false //y轴线消失
                },
                axisTick: {
                  show: false //y轴坐标点消失
                },
                axisLabel: {
                  show:false,
                  textStyle: {
                    color: '#ffffff',
                  }
                },
                splitLine :{    //网格线
                  lineStyle:{
                    type:'dashed'    //设置网格线类型 dotted：虚线   solid:实线
                  },
                  show:true //隐藏或显示
                }
              }
            ],
            series: [
              {
                name: 'AQI',
                type: 'bar',
                barWidth: '60%',
                data: data.ydata,
                itemStyle:{
                  color:{
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      { offset: 1, color: '#83bff6' },
                      { offset: 0.5, color: '#188df0' },
                      { offset: 0, color: '#2575FF' }
                    ],
                    global: false // 缺省为 false
                  },
                  normal:{
                    borderRadius: [31, 31, 0, 0],
                    color:function(msg){
                        var colorList = [
                          ['rgba(0,232,209,1)','rgba(0,232,209,0.2)'],
                          ['rgba(255,212,22,1)','rgba(255,212,22,0.2)'],
                          ['rgba(255,146,61,1)','rgba(255,146,61,0.2)'],
                          ['rgba(255,66,0,1)','rgba(255,66,0,0.2)'],
                          ['rgba(210,0,0,1)','rgba(210,0,0,0.2)'],
                          ['rgba(127,0,0,1)','rgba(127,0,0,0.2)']
                        ]
                        let showColor
                        if(msg.value > 0 && msg.value<=50){
                          showColor = colorList[0]
                        }else if(msg.value>50 && msg.value<=100){
                          showColor = colorList[1]
                        }else if(msg.value>100 && msg.value<=150){
                          showColor = colorList[2]
                        }else if(msg.value>150 && msg.value<=200){
                          showColor = colorList[3]
                        }else if(msg.value>200 && msg.value<=300){
                          showColor = colorList[4]
                        }else{
                          showColor = colorList[5]
                        }
                        return {
                          type: 'linear',
                          x: 0,
                          y: 0,
                          x2: 0,
                          y2: 1,
                          colorStops: [
                            { offset: 1, color: showColor[1] },
                            { offset: 0, color: showColor[0] }
                          ],
                          global: false // 缺省为 false
                        }
                    }
                  }
                }
              }
            ]
          }
        })
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        this.setTimeType()
        this.setData({
            nowDate:(new Date()).Format("yyyy年MM月dd日")
        })
        wx.setNavigationBarTitle({
          title: '空气质量日历',
        })
    },
    // 格式化时间
    setTimeType() {
        // 对Date的扩展，将 Date 转化为指定格式的String
        // 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
        // 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
        // 例子：
        // (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
        // (new Date()).Format("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
  
        Date.prototype.Format = function (fmt) {
          // author: meizz
          var o = {
            "M+": this.getMonth() + 1, // 月份
            "d+": this.getDate(), // 日
            "h+": this.getHours(), // 小时
            "m+": this.getMinutes(), // 分
            "s+": this.getSeconds(), // 秒
            "q+": Math.floor((this.getMonth() + 3) / 3), // 季度
            S: this.getMilliseconds() // 毫秒
          };
          if (/(y+)/.test(fmt))
            fmt = fmt.replace(
              RegExp.$1,
              (this.getFullYear() + "").substr(4 - RegExp.$1.length)
            );
          for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt))
              fmt = fmt.replace(
                RegExp.$1,
                RegExp.$1.length == 1
                  ? o[k]
                  : ("00" + o[k]).substr(("" + o[k]).length)
              );
          return fmt;
        };
      },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {
  
    },
  
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
  
    },
  
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {
  
    },
  
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {
  
    },
  
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
  
    },
  
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
  
    },
  
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {
  
    }
  })